<template>
    <div class="slider-container" v-model="collapsed" :trigger="null" collapsible style="
  flex: 0 0 100px; max-width: 100px; min-width: 100px;">
        <!--<a-menu class="tag-menu" theme="white" mode="inline" :default-selected-keys="['1']" v-for="blogTag in blogTags" :key="blogTag.id">
            <a-menu-item class="tag-menu-item" :key="blogTag.id">
                <span>{{ blogTag.tagName }}</span>
            </a-menu-item>
        </a-menu>-->
        <div class="blog-tag-container">

            <ul @click="updateStore(i)" v-for="i in blogTags" :key="i.id" class="tag-list" :class="{active: i.id === checkedId}">
                <li class="tag-item">{{i.tagName}}</li>
            </ul>

        </div>
    </div>
</template>

<script>
    import {findAllBlogTags} from '@/api/blog/blogTag'

    export default {
        name: "my-slider",
        data() {
            return {
                checkedId: '',
                collapsed: "",
                blogTags: []
            }
        },
        methods: {
            async initBlogTags() {
                const data = await findAllBlogTags();
                this.blogTags = data
                this.checkedId = this.blogTags[0].id
                this.$store.commit('UPDATE_BLOG_TAG', this.blogTags[0])
            },
            updateStore(blogTag){
                this.checkedId = blogTag.id
                this.$store.commit('UPDATE_BLOG_TAG', blogTag)
                console.log(blogTag)
            },
        },
        created() {
            this.initBlogTags();
        },
    }
</script>
<style scoped>
    .slider-container {
        width: 100px;
        position: fixed;
        z-index: 99;
        background: #fff;
    }

    .ant-layout-sider {
        width: 100px;
        background: white;
    }

    .ant-layout-sider-children {
        margin-top: 10px;
        text-align: center;
    }

    .tag-list {
        text-align: center;
        width: 100px;
        display: block;
        padding: 0;
        margin-top: 5px;
        margin-bottom: 0;
    }

    .tag-item {
        width: 100px;
        display: block;
        height: 32px;
        list-style: none;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }

    .active {
        background: red;
        color: #fff;
    }

    .tag-item:hover {
        background: red;
        color: #fff;
    }

</style>
